import { Ref } from "vue";

// 定义接口 - 订单分区
interface GroupOrders {
    orderNum: number;
    groupName: string;
    totalAmount: number;
}

// 初始化饼图
const initRoundEcharts = (echartRef: Ref<null>, groupOrders: GroupOrders[]) => {
    const myChart = window.echarts.init(echartRef.value);
    let width = myChart.getWidth();
    let height = myChart.getHeight();
    let data = groupOrders.map(item => ({ value: item.orderNum, name: item.groupName }));
    let total = groupOrders.reduce((acc, cur) => {
        acc += cur.orderNum;
        return acc;
    }, 0);

    const option = {
        series: [
            {
                name: "订单分区",
                type: "pie",
                radius: ["70%", "95%"],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: { borderRadius: 10 },
                label: { show: false, position: "center" },
                emphasis: { label: { show: true, fontSize: 26, fontWeight: "bold" } },
                labelLine: { show: false },
                data: data,
            },
        ],
        // 中间球形动画配置
        graphic: [
            {
                type: "circle",
                left: "center",
                top: "center",
                shape: {
                    cx: width * 0.5,
                    cy: height * 0.5,
                    r: Math.min(width * 0.35, height * 0.35) * 0.88,
                },
                style: { fill: "#083649", stroke: "transparent", lineWidth: 0 },
            },
            {
                type: "circle",
                left: "center",
                top: "center",
                shape: {
                    cx: width * 0.5,
                    cy: height * 0.5,
                    r: Math.min(width * 0.35, height * 0.35) * 0.9,
                },
                originX: width * 0.5,
                originY: height * 0.5,
                rotation: 0,
                style: {
                    fill: {
                        type: "linear",
                        x: 0, // 从上到下渐变
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "rgba(50,197,255,0)" },
                            { offset: 0.62, color: "rgba(43,188,255,0.1)" },
                            { offset: 1, color: "rgba(60,240,207,0.33)" },
                        ],
                    },
                    stroke: {
                        type: "linear",
                        x: 0, // 从上到下渐变
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: "rgba(0,229,255,0)" },
                            { offset: 0.5, color: "rgba(0,229,255,1)" },
                            { offset: 1, color: "rgba(0,229,255,0)" },
                        ],
                    },
                    lineWidth: 2,
                },
                keyframeAnimation: {
                    duration: 4000,
                    loop: true,
                    keyframes: [
                        { percent: 0, rotation: 0 },
                        { percent: 50, rotation: 180 },
                        { percent: 100, rotation: 360 },
                        { percent: 0, rotation: 0 },
                    ],
                },
            },
            // 第一行文字
            {
                type: "text",
                left: "center",
                top: "40%",
                style: {
                    text: "订单总数",
                    fill: "#c6f5ff",
                    fontSize: 13,
                    textAlign: "center",
                    textVerticalAlign: "middle",
                },
            },
            // 第二行文字
            {
                type: "group",
                left: "center",
                top: "52%",
                children: [
                    {
                        type: "text",
                        left: -"".length * 6,
                        top: 0,
                        style: {
                            text: total,
                            fill: "#b4fff1",
                            fontSize: 18,
                            textAlign: "center",
                            textVerticalAlign: "middle",
                        },
                    },
                    {
                        type: "text",
                        left: (total + "").length * 9,
                        top: 4,
                        style: {
                            text: "",
                            fill: "#b4fff1",
                            fontSize: 12,
                            textAlign: "right",
                            textVerticalAlign: "middle",
                        },
                    },
                ],
            },
        ],
    };
    myChart.setOption(option);
};
export default initRoundEcharts;
